<template>
  <div id="board-card">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>所有板块</span>
      </div>
      <div v-for="item in items" :key="item" class="text item">
        <span id="board-name">{{ item }}</span>
        <el-badge :value="99"></el-badge>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: ["Python", "Java", "Go", "JavaScript", "C#"]
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 360px;
}

#board-card {
  margin-top: 10px;
}
</style>